<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #car {
            padding: 10px;
        }

        .top {
            display: flex;
            justify-content: space-between;
            height: 50px;
            align-items: center;
            margin-bottom: 20px;
        }

        #car .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        #car .item img {
            width: 80px;
            border: 1px solid gray;
        }

        #car .item .right {
            display: flex;
            align-items: center;
        }

        #car .item .right div {
            margin-right: 15px;
        }

        #car .item .right div:nth-child(1) {
            background-color: white;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            border: 1px solid #00a6ff;
            text-align: center;
            line-height: 15px;
        }

        #car .item .right div:nth-child(3) {
            background-color: #00a6ff;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            color: white;
            text-align: center;
            line-height: 15px;
        }

        .top button {
            border: none;
            background-color: white;
        }

        .top .div {
            font-weight: 800;
            font-size: 20px;
        }

        .middle {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }

        .middle .name {
            margin-bottom: 25px;
        }

        footer {
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="car">
        <div class="top">
            <div>已选商品</div>
            <span @click="clear">清空</span>
        </div>
        <div class="item" v-for="(item,index) in tasklist">
            <div class="left">
                <img v-bind:src="item.pic" alt="">
            </div>
            <div class="middle">
                <div class="name">{{item.name}}</div>
                <div class="price">¥{{item.price}}</div>
            </div>
            <div class="right">
                <div @click="jia(item)">+</div>
                <div>{{item.num}}</div>
                <div @click="jian(item)">-</div>
            </div>
        </div>
        <footer>
            <span>总价为¥</span>
            <button>去结算</button>
        </footer>
    </div>
</body>
<script src="./vue-2.5.21.js"></script>
<script>
    var v = new Vue({
        el: '#car',
        data: {
            tasklist: [
                { id: 0, pic: './image/OIP-C.jpg', name: '秋刀鱼/斤', price: '35.00', num: 1,  },
                { id: 1, pic: './image/OIP-C.jpg', name: '鲜大带鱼/斤', price: '45.00', num: 1, },
                { id: 2, pic: './image/OIP-C.jpg', name: '鲜活全母皮皮虾/斤', price: '85.00', num: 1, }
            ]
        },
        methods: {
            jia(item, index) {
                if (this.tasklist[item.id].num < 5) {
                    this.tasklist[item.id].num++
                }
            },
            jian(item, index) {
                if (this.tasklist[item.id].num > 1) {
                    this.tasklist[item.id].num--
                }
            },
            // summary(item, index) {
            //     var sum = 0
            //     this.tasklist.forEach((item, index) => {
            //         sum += (this.tasklist[item.id].price) * (this.tasklist[item.id].num)
            //     });
            //     console.log();
            // },
            clear(){
                this.tasklist.splice(0,this.tasklist.length)
            }
        }
    })
</script>

</html>